<!--
 @description
 @fileName ShowItem.vue
 @author zengqiongying
 @created 2022/12/30 16:19:48
-->
<template>
  <div class="show-item">
    <div class="image">
      <ImageVideo lazy-load :host="host" :src="src" fit="contain" />
    </div>
    <div class="name">{{ name }}</div>
  </div>
</template>

<script>
import ImageVideo from '@/components/ImageVideo'
export default {
  name: 'CategoryShowItem',
  components: { ImageVideo },
  props: {
    src: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    host: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  },

  computed: {},

  created() {},
  activated() {},

  mounted() {},

  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}

</script>
<style lang='less' scoped>
.show-item{
  --width: calc((100vw - 48px)/2);
  width:var(--width);
  margin:0 0 16px 16px;
  .image{
    width: var(--width);
    height: calc( var(--width) * 78 / 104);
    background: #D8D8D8;
    border-radius: 9px;
    overflow:hidden;
  }
  .name{
    margin-top: 10px;
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333333;
    font-size: 12px;
    text-align: center;
  }
}
</style>
